<template>
	<view class="detail">
		<view class="fixbg" :style="{'background-image': 'url(' + songDetail.al.picUrl +')'}"></view>
		<musichead :title="songDetail.name" :icon="true" color='#ffffff'></musichead>
		<view class="container" >
			<scroll-view scroll-y="true" v-show="!isLoading">
				<!-- 歌曲详情 播放模块 -->
				<view class="detail-play" @tap="handleToPlay">
					<image :src="songDetail.al.picUrl" :class="{ 'detail-play-run': isPlayRotate }" mode=""></image>
					<text class="iconfont " :class="iconPlay"></text>
					<view></view>
				</view>
				<!-- 歌曲详情 歌词模块 -->
				<view class="detail-lyric" >
					<view class="detail-lyric-wrap" :style="{transform: 'translateY('+ -(lyricIndex -1) * 82 +'rpx)'}">
						<view class="detail-lyric-item " :class="{active : lyricIndex == index}" v-for="(item, index) in songLyric" :key='index'>{{ item.lyric }}</view>
					</view>
				</view>
				<!-- 歌曲详情 歌曲推荐模块 -->
				<view class="detail-like">
					<view class="detail-like-head">喜欢这首歌的人也听</view>
					<view class="detail-like-item" v-for="(item, index) in songSimi" :key="index" @tap="handleToSimi(item.id)">
						<view class="detail-like-img">
							<image :src="item.album.picUrl" mode=""></image>
						</view>
						<view class="detail-like-song">
							<view>{{ item.name }}</view>
							<view>
								<image src="../../static/sq.png" mode=""></image>
								<image src="../../static/vip.png" mode=""></image>
								{{ item.album.artists[0].name }} - {{ item.name }}
							</view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view>
				</view>
				<!-- 歌曲详情 评论模块 -->
				<view class="detail-comment">
					<view class="detail-comment-head">
						<text>精彩评论</text>
					</view>
					<view class="detail-comment-item" v-for="(item,index) in songComment" :key="index">
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<view class="detail-comment-text">
							<view class="detail-comment-text-title">
								<view class="detail-comment-text-name">
									<view>{{ item.user.nickname }}</view>
									<view>{{ item.time | timeFormat }}</view>
								</view>
								<view class="detail-comment-text-like">{{ item.likedCount | formatCount }}<text class="iconfont icon-dianzan"></text></view>
							</view>
							<view class="detail-comment-conent">
								{{ item.content }}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import "common/iconfont.css"
	import musichead from "../../components/musichead/musichead.vue"
	import { songDetail, songSimi, songComment, songLyric, songUrl } from "../../common/api.js"
	export default {
		data() {
			return {
				songDetail: {
					al: {
						picUrl: ''
					}
				},
				songSimi: [],
				songComment: [],
				songLyric: [],
				lyricIndex: 0,
				songUrl : '',
				iconPlay: 'icon-zanting',
				isPlayRotate: true,
				isLoading: true
			}
		},
		onLoad(opt){
			this.getMusic(opt.ids)
		},
		onUnload() {
			this.cancelLyricIndex()
			// #ifdef H5
			this.bgAudioManager.destroy()
			// #endif
		},
		onHide() {
			this.cancelLyricIndex()
			// #ifdef H5
			this.bgAudioManager.destroy()
			// #endif
		},
		components:{ 
			musichead
		},
		methods: {
			getMusic(id){
				this.$store.commit("NEXT_ID", id)
				uni.showLoading({
					title:'加载中...'
				})
				this.isLoading = true
				Promise.all( [songDetail(id), songSimi(id), songComment(id), songLyric(id), songUrl(id) ]).then((res)=>{
					if (res[0][1].statusCode == '200'){
						this.songDetail = res[0][1].data.songs[0]
					}
					if (res[1][1].statusCode == '200'){
						this.songSimi = res[1][1].data.songs
					}
					if (res[2][1].statusCode == '200'){
						this.songComment = res[2][1].data.hotComments;
					}
					if (res[3][1].data.code == '200'){
						let result = res[3][1].data.lrc.lyric;
						let re = /\[([^\]]+)\]([^\[]+)/g;
						let lyric = [];
						result.replace(re, ($0, $1, $2)=>{
							lyric.push({'time': this.formatTimeToSec($1), 'lyric': $2})
						});
						this.songLyric = lyric;
					}
					if (res[4][1].statusCode == '200'){
						let songMusic = res[4][1].data.data[0];
						// #ifdef MP-WEIXIN
						this.bgAudioManager = uni.getBackgroundAudioManager();
						this.bgAudioManager.title = this.songDetail.name;
						// #endif
						
						// #ifdef H5
						this.bgAudioManager = uni.createInnerAudioContext();
						this.iconPlay = 'icon-bofang'
						this.isPlayRotate = false
						// #endif
						
						this.bgAudioManager.src = songMusic.url;
						this.listenLyricIndex()
						
						this.bgAudioManager.onPlay(()=>{
							this.iconPlay = 'icon-zanting'
							this.isPlayRotate = true;
							this.listenLyricIndex()
						})
						this.bgAudioManager.onPause(()=>{
							this.iconPlay = 'icon-bofang'
							this.isPlayRotate = false;
							this.cancelLyricIndex()
						})
						this.bgAudioManager.onEnded(()=>{
							this.getMusic(this.$store.state.nextId)
						})
					}
				})
				uni.hideLoading()
				this.isLoading = false
				
			},
			formatTimeToSec(tm){
				let arr = tm.split(':')
				return (Number(arr[0] * 60) + Number(arr[1])).toFixed(1)
			},
			handleToPlay(){
				if (this.bgAudioManager.paused){
					this.bgAudioManager.play()
				}else{
					this.bgAudioManager.pause()
				}
			},
			listenLyricIndex(){
				clearInterval(this.timer)
				this.timer = setInterval(()=>{
					for (var i=0; i<this.songLyric.length; i++){
						if (this.bgAudioManager.current > this.songLyric[this.songLyric.length-1].time){
							this.lyricIndex = this.songLyric.length - 1;
							break;
						}
						if (this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager.currentTime < this.songLyric[i+1].time){
							this.lyricIndex = i;
						}
					}
					console.log(this.lyricIndex);
				}, 500);
			},
			cancelLyricIndex(){
				clearInterval(this.timer)
			}, 
			handleToSimi(songId){
				this.getMusic(songId)
			}
		}
	}
</script>

<style scoped>
@import url("detail.css");
.detail{}
.detail-play{width: 580rpx; height: 580rpx; background-image: url(../../static/yuan.png); background-size: cover; margin: 214rpx auto 0 auto; position: relative;}
.detail-play image{ width: 370rpx; height: 370rpx; border-radius: 50%; position: absolute; left: 0; 
top: 0; right: 0; bottom: 0; margin: auto; animation: 10s linear move infinite; animation-play-state: paused;}
.detail-play .detail-play-run{ animation-play-state: running;}
@keyframes move{
	from{transform: rotate(0deg);}
	to{ transform: rotate(360deg);}
}
.detail-play text{ width: 100rpx; height: 100rpx; font-size: 100rpx; color: white; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.detail-play view{ width: 230rpx; height: 360rpx; background-image: url(../../static/needle-ab.png); position: absolute; background-size: cover; top: -200rpx; left: 150rpx; right: 0; margin: auto;}

.detail-lyric{ font-size: 32rpx; line-height: 82rpx; height: 246rpx; text-align: center; overflow: hidden; color: #6f6e73;}
.detail-lyric-wrap{ transition: .5s;}
.detail-lyric-item{ height: 82rpx;}
.detail-lyric-item.active{ color: #FFFFFF; }

.detail-like{margin: 0 30rpx;}
.detail-like-head{ font-size: 36rpx; color: #FFFFFF; margin: 50rpx 0;}
.detail-like-item{ display: flex; align-items: center; margin-bottom: 28rpx;}
.detail-like-img{width: 82rpx; height: 82rpx; border-radius: 20rpx; overflow: hidden; margin-right: 20rpx;}
.detail-like-img image{width: 100%; height: 100%;}
.detail-like-song{flex: 1; color:#c6c2bf;}
.detail-like-song view:nth-child(1){ font-size: 28rpx; color: #FFFFFF; margin-bottom: 12rpx;}
.detail-like-song view:nth-child(2){font-size: 22rpx;}
.detail-like-song image{ width: 26rpx; height: 20rpx; margin-right: 10rpx;}
.detail-like-item text{font-size: 70rpx; color: #c6c2bf}

</style>
